<template>
	<view class="alert-wrapper" @tap="closeAlert">
		<view class="alert-inner" :style="{top:top,left:left}" >
			<image src="../../static/index/arrTop.png" mode="aspectFill" class="arr_top" v-if="showArr"></image>
			<view class="alert_list" :style="{width:width}">
				<slot name="main"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			top:{
				type:[Number,String],
				default:'100rpx'
			},
			left:{
				type:[Number,String],
				default:'388rpx'
			},
			showArr:{
				type:[Boolean,String],
				default:true
			},
			width:{
				type:[Number,String],
				default:'345rpx'
			}
		},
		data() {
			return {
				
			};
		},
		methods:{
			closeAlert(){
				this.$emit('closeAlert')
			}
		}
	}
</script>

<style lang="scss">
.alert-wrapper{
	z-index: 999;
	.alert-inner{
		position: absolute;
		right: 10rpx;
		top: 25rpx;
		.alert_list{
			background: #FFFFFF;
			width: 345rpx;
			border-radius:12rpx;
			.center{
				padding: 28rpx 40rpx;
				justify-content: flex-start;
			}
			image{
				width:40rpx;
				height:39rpx;
				margin-right: 33rpx;
			}
		}
		.arr_top{
			width: 30rpx;
			height: 40rpx;
			margin: auto auto -25rpx 295rpx;
		}
	}
	
}
</style>
